
@import (reference) "index.less";
.active{
  background-color:#0E97d6;
  color: #dddddd;
}


/* Panel */
.l-topbar-Panel{width: 100%;height: 4.5rem;line-height:4.5rem;border-bottom: 1px solid lightgrey;}
.l-title-Panel{.fs15;height: 4.5rem;text-align: center;width: 50%;float: left;margin-left: 15%;}
.l-bottombar-Panel{ position: absolute;bottom:0; width: 100%;height: 4.5rem;line-height: 4.5rem;border-top: 1px solid lightgrey}
.l-leftMenu-Panel{width:5%;float: left;margin-left: 5%;i{.fs20;}}
.l-rightMenu-Panel{width:5%;float: right;margin-right: 5%; i{.fs20;}}

/* Section */
.l-item-Section{width: 100%;height: 4rem;line-height:4rem;padding-left: 5%;border-bottom: 1px solid @lightGrey;}
.l-title-Section{.fl;.fs15;width: 40%;height: 4rem;line-height:4rem;}
.l-pic-Section{.fr;margin-right:5%;width:10%;height: 4rem;line-height:4rem;}
.l-more-Section{.fr;.fs15;.tac;height: 4rem;line-height:4rem;}

/* Input */
.l-item-Input{height: 3rem;line-height:3rem;border: 1px solid @lightGrey;overflow:hidden;}
.l-li-Input{.fl;width: 15%;text-align: center;height: 3rem;line-height: 3rem;
   i{font-size: 2.3rem;}
}
.l-inp-Input{border:none;outline:none;-webkit-appearance: none;border-radius: 0;.fl;font-size: 1.5rem;width: 60%;height:2.8rem;line-height: 2.8rem;}
.l-ri-Input{.fr;width: 15%;text-align: center;height: 3rem;line-height: 3rem;
  i{font-size: 2rem;}
}

/* Search */
.l-kuang-Search{width:100%;height:3rem;line-height:3rem;background-color: @white;border: 1px solid @lightGrey;border-radius: 0.2rem;}
.l-search-Search{.fr;.tac;.fs13;width: 5rem;background-color: @lightBlue;height: 2.8rem;line-height: 2.8rem;color: white;border-radius: 0.2rem;margin-top: 0.1rem;
  &:active{.active;}
}

/* Win */
.l-mask-win{top:0;width: 100%;height: 100%;z-index: 100;  position:fixed;  background: rgba(0,0,0,0.6);}
.l-kuang-Win{position: absolute;bottom:0;width: 100%;border: 1px solid @lightGrey;background-color:white;z-index: 200;}
.l-title-Win{font-size: 1.7rem;.tac;width: 100%;height: 4rem;line-height:4rem;border-bottom: 1px solid @lightGrey;color: @lightBlue;}
.l-content-Win{overflow: hidden;margin-bottom:5rem;position: relative;min-height:5rem;}
.l-footer-Win{width: 100%;height: 5rem;line-height:5rem;position: absolute;bottom:0;border-top:0.05rem solid @lightGrey;background-color: @white;}
.l-cancle-Win{.fl;.fs15;.tac;height: 3rem;line-height:3rem;border-radius: 0.5rem;background-color: @lightBlue;width: 35%;margin-top: 0.6rem;color: white;margin-left: 10%;
    &:active{.active;}
}

.l-done-Win{.fr;.fs15;.tac;height: 3rem;line-height:3rem;border-radius: 0.5rem;background-color: @lightBlue;width: 35%;margin-top: 0.6rem;color: white;margin-right: 10%;
    &:active{.active;}
}
.l-onedone-Win{.fs15;.tac;height: 3rem;line-height:3rem;border-radius: 0.5rem;background-color: @lightBlue;width: 35%;margin-top: 0.6rem;color: white;margin-left: 32.5%;
    &:active{.active;}
}
.l-block-Win{.fl;.tac;width: 24.5%;border-top: 1px solid @white;border-right:1px solid white;height: 4.5rem;
   .l-block-Win-pic{font-size: 2.5rem;width:100%;height:2.3rem;line-height:3rem;  }
   .l-block-Win-text{.fs13;width:100%;height:1.7rem;}
};


/* MsgBox */
.l-masktrue-MsgBox {.tac;width: 100%;height: 100%; position:fixed;top:0;left:0;z-index: 1000;background-color: rgba(160,160,160,0.9);  }
.l-maskfalse-MsgBox {.tac;width: 100%;height: 100%; position:fixed;top:0;left:0;z-index: 1000;background-color: transparent;  }
.l-kuang-MsgBox {  max-width: 65%;position:relative;color: #FFF; font-size: 1.3rem;margin-top: 60%;
                   display: inline-block;  background: rgba(125,125,125,1);  border-radius: 1rem;  }
.l-img-MsgBox {  width: 3.5rem;padding: 1rem 1rem;  }
.l-word-MsgBox {  height: auto;  line-height: 2rem;  padding: 1.5rem 1.5rem;  }
.l-btn-MsgBox { font-size: 1.5rem; padding: 2rem 1.5rem; }
.l-cancle-MsgBox{.fl;.fs15;.tac;height: 3rem;line-height:3rem;width: 49.3%;color: white;border-top: 1px solid white;border-right: 1px solid white;
  &:active{.active;}
}
.l-done-MsgBox{.fr;.fs15;.tac;height: 3rem;line-height:3rem;width:50%;color: white;border-top: 1px solid white;
  &:active{.active;}
}

/* Week */
.l-choosedTime-Week {  .fl;  color:@white;  width:1.7rem;  height:1.7rem;  font-size: 1rem;  line-height:1.7rem;  border-radius: 50%;  text-align: center;  margin-top: 1rem;  margin-left: 0.4rem;  border: 1px solid @blue;  background-color: @blue;  }
.l-repeatTime-Week {  .fl;  width:1.7rem;  height:1.7rem;  font-size: 1rem;  color:@gray;  line-height:1.7rem;  border-radius: 50%;  text-align: center;  margin-top: 1rem;  margin-left: 0.4rem;  border: 1px solid @gray;  }


/* noUiSlider */

@orange: #f3c316;//橙色
.fs32{font-size: 1.6rem;}
.fs36{font-size: 1.8rem;}
.w85{width:85%;}


.noUi-target,.noUi-target *{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -ms-touch-action:none;
  touch-action:none;
  -ms-user-select:none;
  -moz-user-select:none;
  user-select:none;
  -moz-box-sizing:border-box;
  box-sizing:border-box;

}
.noUi-target{position:relative;direction:ltr;}
.noUi-base{width:100%;height:0.5rem;position:relative;z-index:1;}
.noUi-origin{position:absolute;right:0;top:0;left:0;bottom:0;}
.noUi-handle{position:relative;z-index:1}
.noUi-stacking .noUi-handle{z-index:10}
.noUi-state-tap .noUi-origin{-webkit-transition:left .3s,top .3s;transition:left .3s,top .3s}
.noUi-state-drag *{cursor:inherit!important}
.noUi-base,.noUi-handle{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.noUi-horizontal{height:0.5rem}
.noUi-horizontal .noUi-handle{width:1.7rem;height:1.4rem;left:-0.85rem;top:-0.3rem}
.noUi-vertical{width:0.9rem}
.noUi-vertical .noUi-handle{width:1.4rem;height:1.7rem;left:-0.3rem;top:-0.85rem}
.noUi-background{background:#FAFAFA;box-shadow:inset 0 0.05rem 0.05rem #f0f0f0}
.noUi-connect{background:#3FB8AF;box-shadow:inset 0 0 0.15rem rgba(51,51,51,.45);-webkit-transition:background 450ms;transition:background 450ms}
.noUi-origin{border-radius:.6rem}
.noUi-target{border-radius:.6rem;border:0.05rem solid #D3D3D3;box-shadow:inset 0 0.05rem 0.05rem #F0F0F0,0 0.15rem 0.3rem -0.25rem #BBB}
.noUi-target.noUi-connect{box-shadow:inset 0 0 0.15rem rgba(51,51,51,.45),0 0.15rem 0.3rem -0.25rem #BBB}
.noUi-draggable{cursor:w-resize}.noUi-vertical .noUi-draggable{cursor:n-resize}
.noUi-handle{border-radius:10.25rem;background:#FFF;cursor:default;border: 0.05rem solid black;box-shadow:inset 0 0 0.05rem #FFF,inset 0 0.05rem 0.35rem #EBEBEB,0 0.15rem 0.3rem -0.15rem #BBB}
.noUi-active{box-shadow:inset 0 0 0.05rem #FFF,inset 0 0.05rem 0.35rem #DDD,0 0.15rem 0.3rem -0.15rem #BBB}
.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:0.7rem;width:0.05rem;background:white;left:0.7rem;top:0.3rem}
.noUi-handle:after{left:0.85rem}
.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:0.7rem;height:0.05rem;left:0.3rem;top:0.7rem}
.noUi-vertical .noUi-handle:after{top:0.85rem}[disabled] .noUi-connect,[disabled].noUi-connect{background:#B8B8B8}[disabled]
.noUi-handle,[disabled].noUi-origin{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}
.noUi-pips{position:absolute;color:#999}
.noUi-value{position:absolute;text-align:center}
.noUi-value-sub{color:#ccc;font-size:0.5rem}
.noUi-marker{position:absolute;background:#CCC}
.noUi-marker-large,.noUi-marker-sub{background:#AAA}
.noUi-pips-horizontal{padding:0.5rem 0;height:4rem;top:100%;left:0;width:100%}
.noUi-value-horizontal{-webkit-transform:translate3d(-50%,50%,0);transform:translate3d(-50%,50%,0)}
.noUi-marker-horizontal.noUi-marker{margin-left:-0.05rem;width:0.1rem;height:0.25rem}.noUi-marker-horizontal.noUi-marker-sub{height:0.5rem}
.noUi-marker-horizontal.noUi-marker-large{height:10.25rem}.noUi-pips-vertical{padding:0 0.5rem;height:100%;top:0;left:100%}
.noUi-value-vertical{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);padding-left:20.25rem}
.noUi-marker-vertical.noUi-marker{width:0.25rem;height:0.1rem;margin-top:-0.05rem}.noUi-marker-vertical.noUi-marker-sub{width:0.5rem}
.noUi-marker-vertical.noUi-marker-large{width:10.25rem}
.noUi-tooltip{display:block;position:absolute;border:0.05rem solid #D9D9D9;border-radius:0.15rem;background:#fff;padding:0.25rem;text-align:center}
.noUi-horizontal .noUi-handle-lower .noUi-tooltip{top:-1.6rem}
.noUi-horizontal .noUi-handle-upper .noUi-tooltip{bottom:-1.6rem}.noUi-vertical .noUi-handle-lower .noUi-tooltip{left:120%}
.noUi-vertical .noUi-handle-upper .noUi-tooltip{right:120%}
.noUi-horizontal .noUi-handle {width: 20.25rem;  height: 20.25rem;  left: -0.5rem;  top: -0.5rem;}
.noUi-connect {  background: red;}

.range-container {
  margin-top: 10rem;
  .range-desc {
    text-align: left;
    height: 3.5rem;
    line-height: 3.5rem;
    margin-bottom: 2rem;
    border-bottom:1px solid #EFEFF9;
    -moz-border-radius: 3%;      /* Gecko browsers */
    -webkit-border-radius: 3%;   /* Webkit browsers */
    border-radius:3%;
  }
  .range-data{
    margin-top: 1.5rem;
  }
  .range-bottom{height:1.5rem;}
  .range-el.range-single {
    //margin-top: 0.5rem;
    //.noUi-base {
    //  background: -webkit-linear-gradient(to right, #EFEFEF, @black); /* Safari 5.1 - 6.0 */
    //  background: -o-linear-gradient(to right, #EFEFEF, @black); /* Opera 11.1 - 12.0 */
    //  background: -moz-linear-gradient(to right, #EFEFEF, @black); /* Firefox 3.6 - 15 */
    //  background: linear-gradient(to right, #EFEFEF, @black); /* 标准的语法 */
    //  border-radius:10.1rem;
    //}
    .noUi-origin {
      //background-color: #858585;
    }
  }
}
.turnColorOrange{
  background: -webkit-linear-gradient(to right,@orange , #EFEFEF); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(to right,@orange , #EFEFEF); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(to right, @orange, #EFEFEF); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, @orange, #EFEFEF); /* 标准的语法 */
  border-radius:10.1rem;
  box-shadow: none;
  .noUi-handle{
    border: 1px solid @orange;
  }
}

div{
  -webkit-touch-callout:none;                 /* 禁止选中 */
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:rgba(255,255,255,0);    /* 处理iphone点itemimg_b击瞬间有一个灰色背景 */
}